<template>
  <div class="aui-wrapper aui-page__login">
        <div class="login">
          <div style="color: white;display: flex;align-items: center;">
            <img src="../../assets/img/logo.png" class="logo_img"/>
            <ul class="logo_title">
              <li style="font-weight: bold;font-size: 26px;letter-spacing: 1px;">智慧猪场管理平台</li>
              <li style="font-weight: lighter;padding-top: 5px;letter-spacing: 1px;font-size: 18px;">Smart Farming Platform</li>
            </ul>
          </div>
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" status-icon>
            <el-form-item prop="mobile">
              <el-input v-model="dataForm.mobile" placeholder="手机号" type="number">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
                </span>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
                </span>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">{{ $t('login.title') }}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="login-footer">
          <p><a href="" target="_blank">{{ $t('login.copyright') }}</a>2019 © hjtm.com</p>
        </div>
  </div>
</template>

<script>
/* eslint-disable */
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce'
import { messages } from '@/i18n'
export default {
  data () {
    return {
      i18nMessages: messages,
      dataForm: {
        mobile: '',
        password: ''
      }
    }
  },
  computed: {
    dataRule () {
      return {
        mobile: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        password: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.$http.post('/login2', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            this.$router.replace({ name: 'home' })
            return this.$message.error(res.msg)
          }
          Cookies.set('mobile', this.dataForm.mobile)
          Cookies.set('tenantName', res.data.tenantName)
          Cookies.set('token', res.data.token)
          Cookies.set('url', res.data.url)
          this.$router.replace({ name: 'home' })
        }).catch(() => {}).finally(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style scoped>
  .logo_img {
    width: 48px;
    height: 48px;
  }
  .logo_title{
    list-style-type: none;
    padding: 0px;
    padding-left: 20px;
  }
  .login-footer{
    width: 100%;
    text-align: center;
  }
  .aui-page__login{
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
  }
  .aui-page__login .login{
    background: rgba(13,65,160,1);
    min-width: 420px;
    padding: 25px 40px;
  }
</style>
